<template>
	<view class="filter-wrapper"
		:style="{ height: height + 'rpx', top: top,'border-top':border?'1rpx solid #f2f2f2':'none' }"
		@touchmove.stop.prevent="discard">
		<view class="inner-wrapper">
			<view class="mask" :class="showMask ? 'show' : 'hide'" @tap="tapMask"></view>
			<view class="navs">
				<view class="c-flex-align"
					:class="{ 'c-flex-center': index > 0,'right c-flex-aligin': index == (navData.length-1), actNav: index === actNav }"
					v-for="(item, index) in navData" :key="index" @click="navClick(index)">
					<view v-for="(child, childx) in item" :key="childx" v-if="child.select">{{ child.name }}</view>
					<image src="http://120.76.245.175/uploads/image/top.png" style="width: 30rpx;height: 30rpx;" mode=""
						class="icon-triangle" v-if="index === actNav"></image>
					<image src="https://i.loli.net/2020/07/15/xjVSvzWcH9NO7al.png" mode="" class="icon-triangle" v-else>
					</image>
				</view>


			</view>
			<!-- 地区 -->
			<scroll-view scroll-y="true" class="popup" :class="popupShow ? 'popupShow' : ''" v-if="tableIndex==0">
				<view class="areabtn" @click="handleareaTj">
					重置
				</view>
				<view class="areaBox" style="display: flex;">

					<view class="area">
						<view class="areaitem" :class="{areaitemed:districtCurrindex==index}"
							v-for="(item,index) in district" @click="handledistrictCurrindex(index)" :key="index">
							{{item.county}}
						</view>
					</view>

					<view class="street">
						<view class="streetitem" :class="{streetitemed:streetCurrindex==index}"
							v-for="(item,index) in street" @click="handlestreetitemed(index)" :key="index">
							{{item.town}}
						</view>
					</view>

					<view class="street">
						<view class="streetitem" :class="{streetitemed:communityCurrindex==index}"
							v-for="(item,index) in communityList" @click="handlecommunityCurrindex(index)" :key="index">
							{{item.village}}
						</view>
					</view>

				</view>
			</scroll-view>

			<!-- 房型 -->
			<scroll-view scroll-y="true" class="popup" :class="popupShow ? 'popupShow' : ''" v-if="tableIndex==1">
				<view class="houseType">
					<view class="typeBox">
						<view class="houseTypeitem" :class="{btns:houseTypeIndex == index}"
							v-for="(item,index) in houseType" :key="item.id" @click="handleHouseType(item,index)">
							{{item.name}}
						</view>
					</view>

					<view class="btnsbox">
						<view class="btn" @click="handleResethousetype">
							重置
						</view>
						<view class="btn btns" @click="handleSubmithousetype">
							查看房源
						</view>
					</view>
				</view>
			</scroll-view>

			<!-- 租金 -->
			<scroll-view scroll-y="true" class="popup" :class="popupShow ? 'popupShow' : ''" v-if="tableIndex==2">
				<view class="rentBox">

					<view class="rentitem" :class="{rentitemed : rentCurrindex == index}"
						v-for="(item,index) in rentData" :key="item.id" @click="handleRent(item,index)">
						{{item.name}}
					</view>

				</view>
			</scroll-view>

			<!-- 筛选 -->
			<scroll-view scroll-y="true" class="popup" :class="popupShow ? 'popupShow' : ''" v-if="tableIndex==3">
				<view class="screenBox">
					<view class="orderbgBox">
						<view class="title">
							排序方式
						</view>
						<view class="orderbyitembox">
							<view class="orderbyitem" :class="{orderbyitemed:orderbycurrindex == index}"
								v-for="(item,index) in orderbyList" :key="item.id" @click="handleOrder(item,index)">
								{{item.name}}
							</view>
						</view>

					</view>
					<view class="orderbgBox" style="margin-top: 20rpx;">
						<view class="title">
							特色
						</view>
						<view class="orderbyitembox">
							<view class="orderbyitem" :class="{orderbyitemed:advantageCurrindex == index}"
								v-for="(item,index) in advantageList" :key="item.id"
								@click="handleAdvantage(item,index)">
								{{item.name}}
							</view>
						</view>

					</view>

					<view class="orderbgBox" style="margin-top: 20rpx;">
						<view class="title">
							中介费
						</view>
						<view class="orderbyitembox">
							<view class="orderbyitem" style="background-color: #F8AD22; color: #ffffff;">
								不限
							</view>
						</view>

					</view>

					<view class="orderbgBox" style="margin-top: 20rpx;">
						<view class="title">
							房屋朝向
						</view>
						<view class="orderbyitembox">
							<view class="orderbyitem" :class="{orderbyitemed:towardCurrindex == index}"
								v-for="(item,index) in towardList" :key="item.id" @click="handleToward(item,index)">
								{{item.name}}
							</view>
						</view>

					</view>

					<view class="btnsbox" style="margin-top: 40rpx;">
						<view class="btn" @click="handleResetscreen">
							重置
						</view>
						<view class="btn btns" @click="handleSubmithousetype">
							查看房源
						</view>
					</view>

				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		houselayout,
		houserent,
		houseadvantage,
		houseatoward,
		houseArea
	} from '@/api/api.js';
	export default {
		props: {
			height: {
				type: Number,
				default: 108
			},
			top: {
				type: String,
				default: 'calc(var(--window-statsu-bar) + 44px)'
			},
			border: {
				type: Boolean,
				default: false
			},
			filterData: {
				//必填
				type: Array,
				default: () => {
					return [];
				}

			},
			defaultIndex: {
				//默认选中条件索引,超出一类时必填
				type: Array,
				default: () => {
					return [0];
				}
			},

		},
		data() {
			return {
				navData: [],
				tableIndex: 0,
				popupShow: false,
				showMask: false,
				actNav: null,
				selDate: '选择日期',
				selIndex: [], //选中条件索引
				houseType: [], //房型列表
				houseTypeIndex: null,
				rentData: [], //租金列表
				rentCurrindex: 0,
				orderbyList: [{
						id: 1,
						name: "默认排序"
					},
					{
						id: 2,
						name: "低价优先"
					},
					{
						id: 3,
						name: "高价优先"
					},
				],
				advantageList: [],
				towardList: [],
				orderbycurrindex: 0,
				advantageCurrindex: 0,
				towardCurrindex: 0,
				district: [],
				street: [],
				communityList: [],
				districtCurrindex: null,
				streetCurrindex: null,
				communityCurrindex: null,
				rent: "", //价格筛选
				layout: "", //房型
				toward: "", //朝向
				advantage: "", //特色
				sort: "", // 低价 高价优先
				community: "", //地区id
			};
		},
		created() {
			this.navData = this.filterData;
			this.selIndex = this.defaultIndex;
			this.getArea()
			this.keepStatus();
			this.getHouselayout()
			this.getHouserent()
			this.getHouseadvantage()
			this.getHouseatoward()
			// this.getHouseArea()
		},
		mounted() {
			// this.selDate = getCurDateTime().formatDate;
		},
		methods: {
			sendParamToParent() {
				let param = {
					rent: this.rent, //价格
					layout: this.layout, //房型
					toward: this.toward, //朝向
					advantage: this.advantage, //特色
					sort: this.sort, //低价 高价优先
					community: this.community, //地区id
				}
				this.$emit('childEvent', param);
			},
			handledistrictCurrindex(index) {
				this.districtCurrindex = index
				console.log("mmmmmmmmm", this.district[index])
				if (this.district[index].son) {
					this.street = this.district[index].son
					this.community = []
					this.streetCurrindex = null
					this.communityCurrindex = null
				} else {
					// this.community = this.district[index].id
					// this.tapMask();
				}
			},
			handlestreetitemed(index) {
				this.streetCurrindex = index
				console.log("ssssssssssss", this.district[index])
				if (this.street[index].son) {
					this.communityList = this.street[index].son
					this.communityCurrindex = null
				} else {
					// this.community = this.street[index].id
					// this.tapMask();
				}

			},
			handlecommunityCurrindex(index) {
				console.log("mmmmmmmmmmmm----------", this.communityList[index])
				this.communityCurrindex = index
				this.community = this.communityList[index].id
				this.tapMask();
			},
			getArea() {
				this.district = uni.getStorageSync("areaList")
				// this.street = this.district[0].son
				// this.community = this.street[0].son
			},

			async getHouselayout() {
				let res = await houselayout()
				if (res.code == 1000) {
					this.houseType = res.data
				}
			},

			handleHouseType(item, index) {
				this.layout = item.id
				this.houseTypeIndex = index
			},

			handleResethousetype() {
				this.layout = ""
				this.houseTypeIndex = null
			},

			handleSubmithousetype() {
				this.tapMask();
			},

			handleareaTj() {
				this.community = ""
			},
			
			async getHouserent() {
				let res = await houserent()
				if (res.code == 1000) {
					this.rentData = res.data
					// console.log("租金",res)
				}
			},
			handleRent(item, index) {
				this.rentCurrindex = index
				this.rent = item.id
				this.tapMask();
			},
			async getHouseadvantage() {
				let res = await houseadvantage()
				if (res.code == 1000) {
					// console.log("房屋特色",res)
					this.advantageList = res.data
				}
			},

			async getHouseatoward() {
				let res = await houseatoward()
				if (res.code == 1000) {
					// console.log("房屋朝向",res)
					this.towardList = res.data
					console.log("this.towardList", this.towardList)
				}
			},
			handleOrder(item, index) {
				this.sort = item.id
				this.orderbycurrindex = index
			},
			handleAdvantage(item, index) {
				this.advantage = item.id
				this.advantageCurrindex = index
			},
			handleToward(item, index) {
				this.toward = item.id
				this.towardCurrindex = index
			},
			handleResetscreen() {
				this.orderbycurrindex = 0
				this.advantageCurrindex = 0
				this.towardCurrindex = 0
			},
			// ====================================
			keepStatus() {
				this.navData.forEach(itemnavData => {
					itemnavData.map(child => {
						child.select = false;
					});
					return itemnavData;
				});
				for (let i = 0; i < this.selIndex.length; i++) {
					let selindex = this.selIndex[i];
					this.navData[i][selindex].select = true;
				}
			},
			navClick(index) {
				this.tableIndex = index;
				console.log(this.actNav);
				if (index === this.actNav) {
					this.tapMask();
					return;
				}
				this.popupShow = true;
				this.showMask = true;
				this.actNav = index;
			},
			handleOpt(index) {
				this.selIndex[this.actNav] = index;
				this.keepStatus();
				setTimeout(() => {
					this.tapMask();
				}, 100);
				let data = [];
				let res = this.navData.forEach(item => {
					let sel = item.filter(child => child.select);
					data.push(sel);
				});
				console.log(data);
				this.$emit('onSelected', data);
			},
			dateClick() {
				this.tapMask();
			},
			tapMask() {
				this.showMask = false;
				this.popupShow = false;
				this.actNav = null;
				this.sendParamToParent()
			},
			handleDate(e) {
				let d = e.detail.value;
				this.selDate = d;
				this.$emit('dateChange', d);
			},
			discard() {}
		}
	};
</script>

<style lang="scss" scoped>
	.areabtn {
		width: 250rpx;
		height: 70rpx;
		background: #F8AD22;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		line-height: 70rpx;
	}

	.areaBox {
		width: 100%;

		.area {
			width: 33.3%;
			text-align: center;

			.areaitem {
				width: 100%;
				height: 80rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 80rpx;
			}

			.areaitemed {
				background: #F7F8FA;
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}

		.street {
			width: 33.3%;
			text-align: center;

			.streetitem {
				width: 100%;
				height: 80rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 80rpx;
			}

			.streetitemed {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}

		}


	}

	.houseType {
		width: 750rpx;
		// height: 464rpx;
		background: #FFFFFF;
		padding: 30rpx;
		box-sizing: border-box;

		.typeBox {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.houseTypeitem {
				width: 204rpx;
				height: 56rpx;
				background: #F7F8FA;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 56rpx;
				text-align: center;
				margin-bottom: 30rpx;
			}

			.btns {
				background: #F8AD22;
				color: #FFFFFF;
			}

		}


	}

	.btnsbox {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.btn {
			width: 320rpx;
			height: 88rpx;
			background: #F7F8FA;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 88rpx;
			text-align: center;
		}

		.btns {
			background: #F8AD22;
			color: #FFFFFF;
		}
	}


	.rentBox {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;

		.rentitem {
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 33rpx;
			margin-top: 40rpx;
		}

		.rentitemed {
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}

	.screenBox {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;

		.title {
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 33rpx;
		}

		.orderbgBox {
			.orderbyitembox {
				margin-top: 15rpx;
				display: flex;
				flex-wrap: wrap;

				.orderbyitem {
					width: 156rpx;
					height: 56rpx;
					background: #F7F8FA;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 56rpx;
					text-align: center;
					margin-bottom: 20rpx;
					margin-right: 16rpx;
				}

				.orderbyitemed {
					background: #F8AD22;
					color: #FFFFFF;
				}
			}
		}
	}

	// =============================
	page {
		font-size: 28rpx;
	}

	.c-flex-align {
		display: flex;
		align-items: center;
	}

	.c-flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.filter-wrapper {
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 999;

		.inner-wrapper {

			// position: relative;
			.navs {
				position: relative;
				height: 80rpx;
				padding: 0 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				border-bottom: 2rpx solid #f5f6f9;
				color: #8b9aae;
				z-index: 999;
				box-sizing: border-box;
				font-size: 26rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 30rpx;

				&>view {
					flex: 1;
					height: 100%;
					flex-direction: row;
					z-index: 999;
				}

				.right {
					justify-content: flex-end;
				}

				// .actNav {
				//     color: #4d7df9;
				//     font-weight: bold;
				// }
			}

			.mask {
				z-index: 666;
				position: fixed;
				top: calc(var(--status-bar-height) + 44px);
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0);
				transition: background-color 0.15s linear;

				&.show {
					background-color: rgba(0, 0, 0, 0.01);
				}

				&.hide {
					display: none;
				}
			}

			.popup {
				position: relative;
				max-height: 800rpx;
				background-color: #fff;
				border-bottom-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				overflow: scroll;
				z-index: 999;
				transition: all 1s linear;
				opacity: 0;
				display: none;

				.item-opt {
					height: 80rpx;
					padding: 0 40rpx;
					color: #8b9aae;
					border-bottom: 2rpx solid #f5f6f9;
				}

				.actOpt {
					color: #4d7df9;
					font-weight: bold;
					position: relative;

					&::after {
						content: '✓';
						font-weight: bold;
						font-size: 36rpx;
						position: absolute;
						right: 40rpx;
					}
				}
			}

			.popupShow {
				display: block;
				opacity: 1;
			}
		}

		.icon-triangle {
			width: 16rpx;
			height: 16rpx;
			margin-left: 10rpx;
		}
	}
</style>